<template>
  <div class="userCollect">
    <div class="userCollect-header">
      <BoxBorder title-button="我的收藏" />
    </div>
    <div class="userCollect-content">
      <div class="userCollect-content-search">
        <el-form
          ref="form"
          size="medium"
          label-position="right"
          class="user-consume-search"
          :model="formSearch"
          label-width="260px"
          :inline="true"
        >
          <el-form-item label="时间查询：">
            <el-date-picker
              v-model="formSearch.dateVal"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            /></el-form-item>

          <el-form-item label="课程名：" :inline-message="true">
            <div class="user-consume-search-input">
              <input v-model="formSearch.inputVal">
              <el-button
                style="float: right; padding-right: 30px;height:40px"
                type="primary"
                icon="el-icon-search"
                @click="getOrFindUserConsumeList"
              >搜索</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-for="collectClass in collectClassList" :key="collectClass.id" class="userCollect-content-modelBox">

        <div class="userCollect-content-modelBox-text">{{ collectClass[0].dateTime }}</div>
        <div v-for="(collect,index) in collectClass" :key="collect.id" class="userCollect-content-modelBox-model">
          <ClassModel width-height="width:190px;height:192px">
            <template v-slot:class-img>
              <img :src="collectClass[index].class_img" alt="" style="width:100%;height:100%">
            </template>
            <template v-slot:class-name>
              <div>{{ collectClass[index].currentname }}</div>
            </template>
            <template v-slot:class-buy>
              <a @click="buyClass(collectClass[index].class_id)">马上购买</a>
            </template>
            <template v-slot:class-cancel>
              <a @click="handleCancelCollect(collectClass[index].class_id)">取消收藏</a>
            </template>
          </ClassModel>
        </div>
      </div>

    </div>
    <div class="userCollect-footer">
      <el-pagination
        :current-page="currentPage"
        :page-size="limit"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      limit: 6,
      total: 0,
      formSearch: {
        dateVal: [],
        inputVal: ''
      },
      collectClassList: []

    }
  },
  mounted() {
    this.getUserCollect()
  },
  methods: {
    async getUserCollect() {
      let { dateVal } = this.formSearch
      const { inputVal } = this.formSearch
      const { currentPage, limit } = this
      dateVal = dateVal || []
      const { data, code } = await this.$API.user.getUserCollectClass({
        start_time: dateVal[0] || '',
        last_time: dateVal[1] || '',
        currentname: inputVal,
        page: currentPage,
        size: limit
      })
      if (code === 200) {
        this.collectClassList = []
        this.total = data.count
        data.rows.forEach(item => {
          item.dateTime = this.$dayjs(item.datetime).format('YYYY-MM-DD')
        })
        for (let i = 0; i < data.rows.length; i++) {
          const getSomeDate = data.rows.reduce((prev, val, index2) => {
            console.log(data.rows[i].dateTime === val.dateTime)
            if (data.rows[i].dateTime === val.dateTime) {
              i++
              prev.push(val)
            }
            return prev
          }, [])
          if (getSomeDate[0]) {
            this.collectClassList.push(getSomeDate)
          }
        }
        // debugger
      }
    },
    async handleCancelCollect(classId) {
      await this.$API.classAPI.cancelCollectClass(classId).then(() => {
        this.$message({
          message: '取消收藏成功',
          type: 'success'
        })
        this.getUserCollect()
      }).catch(() => {
        this.$message.error('取消收藏失败')
      })
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.getUserCollect()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getUserCollect()
    },
    getOrFindUserConsumeList() {
      console.log('收藏')
    },
    buyClass(classId) {
      this.$router.push({
        name: 'ClassInfo',
        query: {
          classId: classId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userCollect-header{
  margin-bottom:80px;
}
.userCollect-content{
  &-search{
    margin: 40px auto;

    input{
      -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 300px;
        margin-right:3px;
    }
  }
  &-modelBox{
    margin-left:40px;
    margin-bottom:60px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    &-text{
      font-size: 20px;
      font-weight: 600;
      width: 100%;
    }
    &-modle{
      display: flex;

    }
  }
}
.userCollect-footer{
  text-align: center;
  margin: 40px 0;
}
</style>
